﻿<h2 class="ms-webpart-titleText" style="margin-left:50px;">Select Lists</h2><br/>
<div>
    <%if(!App.ViewedLists.isLoaded){%>
    Working on it...
    <%}else{%>
    <div class="row">
        <div class="metro span12" id="hub">
            <div class="panorama">
                <div class="panorama-sections">
                    <% for(var i = 0, secionInex=1; i < viewedLists.length; i = i+ 3,secionInex++){ %>
                        <div id="section<%=secionInex%>" class="panorama-section tile-span-3 " style="position:static;">
                            <%for(var index = 0; index < 3; index++){%>
                            <% if (!viewedLists.at(index + i)) {  break;} %>
                            <%var model = viewedLists.at(index + i);%>
                            <a href="javascript:" title="<%=model.get('description')%>" class="app-list"  >
                                <div class="ms-vl-appimage  ">
                                    <img class="ms-storefront-appiconimg" style="border: 0px currentColor; background-color:rgb(0,114,198);" alt="<%=model.get('listName')%>" src="<%=model.get('imageUrl')%>"/>
                                </div>
                                <div class="ms-vl-appinfo ms-vl-pointer">
                                    <div class="ms-vl-apptitleouter">
                                        <span title="<%=model.get('listName')%>" class="ms-draggable ms-vl-apptitle ms-listLink">
                                            <%=model.get('listName')%>
                                        </span>
                                    </div>
                                    <div class="ms-metadata ms-vl-appstatus"><%=model.get('itemCount')%> item(s)</div>
                                </div>
                            </a>
                            <%}%>
                        </div>
                    <%}%>
                </div>
            </div>
            <a id="panorama-scroll-prev" href="javascript:" style="position:absolute;">&#xe05d;</a>
            <a id="panorama-scroll-next" href="javascript:" style="position:absolute;">&#xe059;</a>
        </div>
    </div>
    <%}%>
</div>
<div class="span6 align-right">
    <button type="button" class="win-command"  id="saveCommand" onclick="javascript:updateViewedListsSettings(); return false;">
        <span class="win-commandimage win-commandring">&#x0052;</span>
        <span class="win-label">Save</span>
    </button>
</div>
